<template>
  <div>
    <Container>
      <el-row :gutter="30">
        <el-col :md="6">
          <MainPhoto />
          <MainContact class="mt-20px" />
          <PostNewPostComponent class="mt-20px" :post_id="0" />
          <PostHotPostComponent class="mt-20px" :post_id="0" />
        </el-col>
        <el-col :md="18">
          <el-row class="bg-white p-10px">
            <el-col :md="24" class="breadcrumb p-10px">
              <span>当前位置：</span>
              <el-breadcrumb style="display: inline-block">
                <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{ usePost.post.post_title }}</el-breadcrumb-item>
              </el-breadcrumb>
            </el-col>
            <el-col :md="24" class="mt-10px">
              <PostContentComponent></PostContentComponent>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </Container>
  </div>
</template>

<script setup lang="ts">
import { get_about_page } from '~/api';

const usePost = usePostStore();
const data = await get_about_page();
if (data) {
  usePost.post = data;
}
</script>

<style scoped>
.breadcrumb {
  background-color: #f5f5f5;
}
</style>
